<template>
  <div class="comment">
    <!-- 发布点评 -->
    <div class="comment-release" v-if="!hasComment" @click="toLogin">
      <edu-rate :value.sync="releaseValue" :args="releaseArgsRate"></edu-rate>
      <edu-textarea
        :value.sync="releaseTextarea"
        :readonly="!isLogin"
        :args="releaseArgsTextarea"
      ></edu-textarea>
      <el-row type="flex" justify="end">
        <el-button size="mini" plain @click="handlerPublishCommentCancel">取消</el-button>
        <el-button
          :type="releaseDisabled ? 'info' : 'primary'"
          size="mini"
          :disabled="releaseDisabled"
          @click="handlerPublishCommentSubmit"
          >发布</el-button
        >
      </el-row>
    </div>
    <el-tabs v-model="activeComment">
      <el-tab-pane label="全部评论" name="allComment">
        <div class="comment-list">
          <template v-if="$util.isDef(commentList)">
            <el-row
              class="comment-item"
              type="flex"
              v-for="(item, index) in commentList"
              :key="index"
            >
              <div class="pictrue-wrap">
                <edu-avatar
                  shape="circle"
                  :size="40"
                  :src="$util.isDef(item.user) ? item.user.avatar_url : ''"
                  @click="goUser(item.user.id)"
                ></edu-avatar>
              </div>
              <div class="comment-wrap">
                <el-row type="flex" align="middle">
                  <div class="name" v-if="$util.isDef(item.user)" @click="goUser(item.user.id)">
                    {{ item.user.nick_name }}
                  </div>
                  <edu-rate :value.sync="item.star" :args="replyArgsStar"></edu-rate>
                </el-row>
                <div class="text">{{ item.content }}</div>
                <el-row type="flex" justify="space-between" align="middle">
                  <el-row class="time-msg" type="flex">
                    <div class="msg-item">
                      {{ item.create_time | formatTime('{y}-{m}-{d}') }}
                    </div>
                    <div
                      v-if="glob_user_id == item.user_id"
                      class="del-btn"
                      @click="handleDeleteComment(item.id)"
                    >
                      删除
                    </div>
                  </el-row>
                  <el-row class="eval-msg" type="flex">
                    <el-link :underline="false" @click="handleCommentClick(item.id)">
                      <i
                        class="edu-icon-pinglun edu-icon--left"
                        :class="{
                          active: item.reply_count > 0
                        }"
                      ></i>
                      <span class="num">{{ item.reply_count }}</span>
                    </el-link>
                    <edu-like
                      @like="handieCommentLike(item.id, $event)"
                      :like="item.like"
                      :count="item.like_count"
                    ></edu-like>
                  </el-row>
                </el-row>
                <el-collapse-transition>
                  <!-- 回复 -->
                  <div
                    class="comment-reply"
                    v-if="replyListActive[0] == item.id"
                    v-loading="loading"
                  >
                    <div class="comment-header" @click="toLogin">
                      <edu-textarea
                        :value.sync="replyTextarea"
                        :readonly="!isLogin"
                        :args="replyArgsTextarea"
                      ></edu-textarea>
                      <el-row type="flex" justify="end" class="comment-reply-btn">
                        <el-button size="mini" plain @click="handieReplyCancel">取消</el-button>
                        <el-button
                          :type="replyDisabled ? 'info' : 'primary'"
                          :disabled="replyDisabled"
                          size="mini"
                          @click="handleReplySend(item)"
                          >发表</el-button
                        >
                      </el-row>
                    </div>
                    <div class="reply-list" v-if="replyList.length > 0">
                      <el-row
                        class="reply-item"
                        type="flex"
                        v-for="(vo, index) in replyList"
                        :key="index"
                      >
                        <div class="pictrue-wrap">
                          <edu-avatar
                            shape="circle"
                            :src="vo.user.avatar_url"
                            :size="40"
                            @click="goUser(vo.user.id)"
                          ></edu-avatar>
                        </div>
                        <div class="reply-wrap">
                          <el-row type="flex" align="middle">
                            <div class="name" @click="goUser(vo.user.id)">
                              {{ vo.user.nick_name }}
                            </div>
                          </el-row>
                          <div class="text">
                            <template v-if="vo.reply_user_id != 0">
                              回复
                              <span class="text-reply">@{{ vo.reply_user }}</span
                              >：
                            </template>
                            {{ vo.content }}
                          </div>
                          <el-row type="flex" align="middle">
                            <div class="time-msg">
                              {{ vo.create_time | formatTime('{y}-{m}-{d}') }}
                            </div>
                            <div
                              v-if="glob_user_id == vo.user_id"
                              class="del"
                              @click="handleDeleteReply(vo.id, item)"
                            >
                              删除
                            </div>
                            <el-link
                              class="reply-btn"
                              :underline="false"
                              @click="handleReplyClick(vo.user.id, vo.user.nick_name)"
                              >回复</el-link
                            >
                          </el-row>
                        </div>
                      </el-row>
                      <div class="load-more" v-if="replyList.length > 2">
                        <el-link
                          type="primary"
                          :underline="false"
                          @click="handleLoadMore(item.id)"
                          v-if="replyList.length != replyTotal"
                          >展开更多</el-link
                        >
                        <span v-else>没有更多了~</span>
                      </div>
                    </div>
                  </div>
                </el-collapse-transition>
              </div>
            </el-row>
          </template>
          <edu-no-data :image="false" text="暂时还没有评论哦~" v-else></edu-no-data>
          <edu-pagination @handleCurrentChange="handlCommentListChange"></edu-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的评论" name="myComment" v-if="isLogin">
        <div class="comment-list" v-if="!$util.isEmpty(myCommentList)">
          <el-row class="comment-item" type="flex">
            <div class="pictrue-wrap">
              <edu-avatar
                shape="circle"
                :size="40"
                :src="myCommentList.user.avatar_url"
                @click="goUser(myCommentList.user.id)"
              ></edu-avatar>
            </div>
            <div class="comment-wrap">
              <el-row type="flex" align="middle" justify="space-between">
                <el-row type="flex" align="middle">
                  <div class="name" @click="goUser(myCommentList.user.id)">
                    {{ myCommentList.user.nick_name }}
                  </div>
                  <edu-rate :value.sync="myCommentList.star" :args="replyArgsStar"></edu-rate>
                </el-row>
                <el-link :underline="false" @click="handleCommentModify">
                  <i class="el-icon-edit"></i>
                </el-link>
              </el-row>
              <div class="text">{{ myCommentList.content }}</div>
              <el-row type="flex" align="middle">
                <el-row class="time-msg" type="flex">
                  <div class="msg-item">
                    {{ myCommentList.create_time | formatTime('{y}-{m}-{d}') }}
                  </div>
                  <span
                    v-if="glob_user_id == myCommentList.user_id"
                    class="del-btn"
                    @click="handleDeleteComment(myCommentList.id)"
                    >删除</span
                  >
                </el-row>
                <el-row class="eval-msg" type="flex">
                  <el-link :underline="false" @click="handleCommentClick(myCommentList.id)">
                    <i
                      class="edu-icon-pinglun"
                      :class="{
                        active: myCommentList.reply_count > 0
                      }"
                    ></i>
                    <span class="num">{{ myCommentList.reply_count }}</span>
                  </el-link>
                  <edu-like
                    @like="handieCommentLike(myCommentList.id, $event)"
                    :like="myCommentList.like"
                    :count="myCommentList.like_count"
                  ></edu-like>
                </el-row>
              </el-row>
              <el-collapse-transition>
                <div
                  class="comment-reply"
                  v-if="replyListActive[0] == myCommentList.id"
                  v-loading="loading"
                >
                  <div class="comment-header">
                    <edu-textarea
                      :value.sync="replyTextarea"
                      :readonly="!isLogin"
                      :args="replyArgsTextarea"
                    ></edu-textarea>
                    <el-row type="flex" justify="end" class="comment-reply-btn">
                      <el-button size="mini" plain @click="handieReplyCancel">取消</el-button>
                      <el-button
                        :type="replyDisabled ? 'info' : 'primary'"
                        :disabled="replyDisabled"
                        size="mini"
                        @click="handleReplySend(myCommentList)"
                        >发表</el-button
                      >
                    </el-row>
                  </div>
                  <div class="reply-list" v-if="replyList.length > 0">
                    <el-row
                      class="reply-item"
                      type="flex"
                      v-for="(item, index) in replyList"
                      :key="index"
                    >
                      <div class="pictrue-wrap">
                        <edu-avatar
                          shape="circle"
                          :src="item.user.avatar_url"
                          :size="40"
                          @click="goUser(item.user.id)"
                        ></edu-avatar>
                      </div>
                      <div class="reply-wrap">
                        <el-row type="flex" align="middle">
                          <div class="name" @click="goUser(item.user.id)">
                            {{ item.user.nick_name }}
                          </div>
                        </el-row>
                        <div class="text">
                          <template v-if="item.reply_user_id != 0">
                            回复
                            <span class="text-reply">@{{ item.reply_user }}</span
                            >：
                          </template>
                          {{ item.content }}
                        </div>
                        <el-row type="flex" justify="space-between" align="middle">
                          <div class="time-msg">
                            {{ item.create_time | formatTime('{y}-{m}-{d}') }}
                          </div>
                          <div
                            v-if="glob_user_id == item.user_id"
                            class="del"
                            @click="handleDeleteReply(item.id, myCommentList)"
                          >
                            删除
                          </div>
                          <el-link
                            class="reply-btn"
                            :underline="false"
                            @click="handleReplyClick(item.user.id, item.user.nick_name)"
                            >回复</el-link
                          >
                        </el-row>
                      </div>
                    </el-row>
                    <div class="load-more" v-if="replyList.length > 2">
                      <el-link
                        type="primary"
                        :underline="false"
                        @click="handleLoadMore(myCommentList.id)"
                        v-if="replyList.length != replyTotal"
                        >展开更多</el-link
                      >
                      <span v-else>没有更多了~</span>
                    </div>
                  </div>
                </div>
              </el-collapse-transition>
            </div>
          </el-row>
        </div>
        <edu-no-data :image="false" text="暂时还没有评论哦~" v-else></edu-no-data>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import EduRate from '@/components/EduRate'
import EduLike from '@/components/EduLike'
import EduNoData from '@/components/EduNoData'
import EduTextarea from '@/components/EduTextarea'
import EduPagination from '@/components/EduPagination'
import { mapGetters } from 'vuex'
export default {
  props: ['detailInfo'],
  components: {
    EduRate,
    EduLike,
    EduNoData,
    EduTextarea,
    EduPagination
  },
  inject: ['reload'],
  data() {
    return {
      activeComment: 'allComment',
      hasComment: false,
      // 发布点评
      releaseValue: 1,
      releaseTextarea: '',
      releaseArgsRate: {
        max: 5,
        show_score: 1,
        half: true
      },
      releaseArgsTextarea: {
        minlength: 1,
        maxlength: 200,
        rows: 4,
        word_limit: 1,
        placeholder: '您可以分享学习体验、课程内容、老师讲课的风格等'
      },
      releaseDisabled: true,
      // 点评列表
      commentList: null,
      replyList: [],
      replyListActive: [], // 当前激活的面板名称数组
      replyId: 0, // 回复用户id
      replyTotal: 0,
      replyTextarea: '', // 回复用户内容
      replyDisabled: true,
      replyArgsStar: {
        max: 5,
        disabled: true
      },
      replyArgsTextarea: {
        minlength: 1,
        maxlength: 200,
        word_limit: 1,
        rows: 1,
        placeholder: '说点什么吧!'
      },
      pageCont: 5,
      loading: false,
      // 我的点评
      myCommentList: {}
    }
  },
  watch: {
    releaseTextarea(val) {
      if (val.trim().length > 0) {
        this.releaseDisabled = false
      } else {
        this.releaseDisabled = true
      }
    },
    replyTextarea(val) {
      if (val.trim().length > 0) {
        this.replyDisabled = false
      } else {
        this.replyDisabled = true
      }
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'user/isLogin',
      getUserInfo: 'user/accountInfo'
    }),
    // 当前用户是自己id
    glob_user_id() {
      if (!this.isLogin && this.$util.isEmpty(this.getUserInfo)) return 0
      return this.getUserInfo.id
    }
  },
  mounted() {
    this.handleCommentInit()
  },
  methods: {
    toLogin() {
      this.$globalToLogin(() => {})
    },
    // 获取点评列表
    handleCommentInit() {
      this.$api.getCourseComment(
        this.$route.params.id,
        {
          page: this.$store.getters['paginate/page'],
          count: 10
        },
        res => {
          let data = res.data
          this.commentList = data.list.data
          this.hasComment = data.has_comment
          this.myCommentList = data.my_comment
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 10,
            total: res.data.list.total
          })
        }
      )
    },
    /**
     * 发布点评
     */
    handlerPublishCommentSubmit() {
      if (this.detailInfo.is_buy == 1) {
        this.releaseDisabled = !this.releaseDisabled // 禁止重复点击
        this.$api.createCourseComment(
          this.$route.params.id,
          {
            star: this.releaseValue,
            content: this.releaseTextarea.trim()
          },
          res => {
            this.releaseTextarea = ''
            this.releaseValue = 1
            this.$message.success(res.msg, res => {
              this.handleCommentInit()
            })
          },
          err => {
            this.$message.error(err.msg)
          }
        )
      } else {
        this.$message.error('需要购买之后才能评论!')
      }
    },
    // 取消发布点评
    handlerPublishCommentCancel() {
      this.releaseValue = 1
      this.releaseTextarea = ''
    },
    /**
     * 点评列表
     */
    // 点评列表分页
    handlCommentListChange() {
      this.handleCommentInit()
    },
    // 回复列表
    getCourseCommentReplyInfo(id) {
      this.loading = true
      this.$api.getCourseCommentReply(
        id,
        {
          count: this.pageCont
        },
        res => {
          let data = res.data
          this.replyList = data.commentReply.data
          this.replyTotal = data.commentReply.total
          setTimeout(() => {
            this.loading = false
          }, 300)
        }
      )
    },
    // 点评点赞
    handieCommentLike(id, index) {
      this.$api.updateCourseCommentlike(id, {
        status: index
      })
    },
    // 回复
    handleReplyClick(id, name) {
      this.$globalToLogin(() => {
        this.replyId = id
        this.replyTextarea = ''
        this.replyArgsTextarea.placeholder = '回复' + name + ':'
      })
    },
    // 取消回复
    handieReplyCancel() {
      this.replyId = 0
      this.replyTextarea = ''
      this.replyArgsTextarea.placeholder = '说点什么吧!'
    },
    // 保存打开的数组
    setActiveNames(activeNames) {
      // 返回activeNames数组
      activeNames = [].concat(activeNames)
      this.replyListActive = activeNames
    },
    // 打开回复列表
    handleCommentClick(id) {
      this.commentReplyList = {}
      this.setActiveNames(
        (this.replyListActive[0] || this.replyListActive[0] === 0) && this.replyListActive[0] === id
          ? ''
          : id
      )
      let index = this.replyListActive.indexOf(id)
      if (index > -1) {
        // 当前未激活状态
        this.getCourseCommentReplyInfo(id)
      }
    },
    // 提交回复
    handleReplySend(item) {
      this.replyDisabled = !this.replyDisabled // 禁止重复点击
      this.$api.createCourseCommentReply(
        item.id,
        {
          reply_user_id: this.replyId,
          content: this.replyTextarea.trim()
        },
        res => {
          this.replyId = 0
          this.replyTextarea = ''
          this.$message.success(res.msg, res => {
            this.getCourseCommentReplyInfo(item.id)
            item.reply_count++
          })
        },
        error => {
          this.$message.error(error.msg)
        }
      )
    },
    // 删除评论
    handleDeleteComment(id) {
      this.$messageBox
        .confirm('确定删除评论吗？', {
          center: true,
          type: '',
          showClose: true
        })
        .then(() => {
          this.$api.deleteCourseComment(
            id,
            res => {
              this.$message.success(res.msg)
              this.handleCommentInit()
            },
            error => {
              this.$message.error(error.msg)
            }
          )
        })
        .catch(() => {})
    },
    // 删除回复
    handleDeleteReply(id, item) {
      this.$messageBox
        .confirm('确定删除回复吗？', {
          center: true,
          type: '',
          showClose: true
        })
        .then(() => {
          this.$api.deleteCourseCommentReply(
            id,
            res => {
              item.reply_count--
              this.getCourseCommentReplyInfo(item.id)
              this.$message.success(res.msg)
            },
            error => {
              this.$message.error(error.msg)
            }
          )
        })
        .catch(() => {})
    },
    // 回复列表加载更多
    handleLoadMore(id) {
      this.pageCont += 5
      this.getCourseCommentReplyInfo(id)
    },
    /**
     * 我的点评
     **/
    // 修改我的点评
    handleCommentModify() {
      this.hasComment = !this.hasComment
      this.releaseTextarea = ''
      this.releaseTextarea = this.myCommentList.content
      this.releaseValue = this.myCommentList.star
    },
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.comment {
  padding: 0 25px 50px;
  ::v-deep .el-tabs {
    .el-tabs__header {
      margin-left: -12px;
    }
    .el-tabs__active-bar {
      display: (none !important);
    }
    .el-tabs__item {
      height: (30px !important);
      line-height: (30px !important);
      padding: (0 12px !important);
    }
    .el-tabs__nav-wrap::after {
      height: (0 !important);
    }
  }
  // 提交点评
  .comment-release {
    margin-bottom: 10px;
    ::v-deep .el-textarea {
      display: block;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
  // 点评列表
  .comment-list {
    .comment-item {
      padding-top: 20px;
      padding-bottom: 20px;
      position: relative;
    }
    .comment-wrap {
      flex: 1;
      margin-left: 15px;
      .el-rate {
        margin-left: 10px;
      }
      .name {
        font-size: 14px;
        font-weight: 400;
        color: $text-color-secondary;
        cursor: pointer;
      }
      .text {
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 400;
        color: $text-color-import;
        line-height: 24px;
      }
      .time-msg {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-secondary;
        .msg-item + .msg-item {
          margin-left: 15px;
        }
      }
      .del-btn {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-secondary;
        cursor: pointer;
        margin-left: 30px;
      }
      .eval-msg {
        margin-left: auto;
        [class^='edu-icon-'],
        [class*='edu-icon-'] {
          font-size: 16px;
        }
        .el-link + .el-link {
          margin-left: 30px;
        }
        .edu-icon-pinglun {
          color: $text-color-auxiliary;
          &.active {
            @include edu-color-auxiliary;
          }
        }
        .edu-icon-dianzan_active {
          color: $text-color-auxiliary;
          &.active {
            @include edu-color-auxiliary;
          }
        }
        .num {
          font-size: 12px;
          font-weight: 400;
          color: $text-color-auxiliary;
          line-height: 1;
          margin-left: 3px;
        }
      }
    }
    // 回复
    .comment-reply {
      margin-top: 10px;
      .comment-header {
        .comment-reply-btn {
          margin-top: 10px;
        }
      }
      .reply-list {
        margin-top: 10px;
        padding: 10px 15px;
        background-color: #f7f7f7;
      }
      .reply-item {
        padding: 15px 0;
        .reply-wrap {
          flex: 1;
          margin-left: 15px;
          .name {
            font-size: 14px;
            font-weight: 400;
            color: $text-color-secondary;
            cursor: pointer;
          }
          .text {
            margin-top: 5px;
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 400;
            color: $text-color-import;
            line-height: 24px;
            .text-reply {
              color: $text-color-secondary;
              font-size: 13px;
            }
          }
          .time-msg {
            font-size: 13px;
            font-weight: 400;
            color: $text-color-secondary;
          }
          .reply-btn {
            margin-left: auto;
            font-size: 12px;
            font-weight: 400;
            color: $text-color-secondary;
          }
          .del {
            font-size: 13px;
            color: $text-color-secondary;
            cursor: pointer;
            margin-left: 30px;
          }
        }
      }
      .load-more {
        margin-left: 55px;
        font-size: 13px;
        font-weight: 400;
        color: $text-color-secondary;
        .el-link {
          font-size: 13px;
          font-weight: 400;
          @include edu-color-auxiliary;
        }
      }
    }
  }
}
</style>
